<template>
   
  <div class="block-bor invite">
    <div>邀请码</div>
<!--    <img class="img-code" src="../../src/assets/img/invite.png">-->
    <div id="qrcode" class="img-code">
      <Qrcode :value="url" :width="width" :height="width" v-if="width > 0"/>
    </div>
    <div class="copy-text">
      <span>{{code}}</span>
      <img src="../../src/assets/img/icon_copy@2x.png" @click="copyText"> </div>
  </div>
</template>
<script>
   
  import Qrcode from 'qrcode-vue3'
  import {state} from "../dapp";

  export default {
    components: {
      Qrcode
    },
    data() {
      const url = location.protocol + '//' + location.host + '?invite=' + state.address
      return {
        code: state.address,
        url: url,
        width: 0,
      }
    },
    mounted() {
      const that = this
      var t = setInterval(() => {
        var qr = document.getElementById('qrcode')
        if (qr) {
          var w = qr.offsetWidth
          // console.log('width=', w);
          clearInterval(t)
          that.width = w
        }
      }, 200)
    },
    methods: {
      copyText: function () {
        let target = document.createElement('input') //创建input节点
        target.value = this.code // 给input的value赋值
        document.body.appendChild(target) // 向页面插入input节点
        target.select() // 选中input
        try {
          document.execCommand('Copy') // 执行浏览器复制命令
          Toast('复制成功');
        } catch {
          console.error('复制失败')
        }
        document.body.removeChild(target); // 删除临时实例
      }
    }
  }

</script>
<style lang="less" scoped>
  .invite {
    text-align: center;
    color: #fff;
    padding: 20px 15px;

    .text {
      font-size: 17px;
      font-weight: bold;
    }

    .img-code {
      height: 150px;
      width: 147px;
      margin: 20px auto 30px auto;
    }

    .copy-text {
      padding: 15px 11px;
      background: #222224;
      line-height: 24px;
      font-size: 16px;
      font-weight: 500;
      color: #AD9475;
      word-break: break-all;
      text-align: left;

      img {
        height: 20px;
        width: 20px;
        margin-left: 15px;
      }
    }
  }

</style>
